import React from "react";
import {useSwiper} from "swiper/react";
import {IImgList} from "@/app/components/Content/Recommend/common";

const SlidePrevButton = (props: IImgList) => {
  const [isShow, setIsShow] = React.useState(false);
  const {img, slogan, logo} = props;
  const swiper = useSwiper();
  return (
    <div className="relative  cursor-pointer" onMouseEnter={() => setIsShow(!isShow)} onMouseLeave={() => setIsShow(!isShow)}>

      {isShow && <svg className="md:hidden lg:flex size-1/12 absolute left-11 z-20 top-1/2 -translate-x-1/2 text-white"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                      fill="currentColor">
        <path onClick={() => swiper.slidePrev()} fillRule="evenodd"
              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
              clipRule="evenodd"/>
      </svg>}

      <img src={img} className="mb-5"/>
      <div className="flex justify-center  items-center">
        <img src={logo} className="w-8 mr-2"  />
        <span className="text-center">{slogan}</span>
      </div>


      {isShow && <svg className="md:hidden lg:flex size-1/12 absolute right-11 z-20 top-1/2 -translate-x-1/2 text-white"
                      xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                      fill="currentColor">
        <path onClick={() => swiper.slideNext()} fillRule="evenodd"
              d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm4.28 10.28a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 1 0-1.06 1.06l1.72 1.72H8.25a.75.75 0 0 0 0 1.5h5.69l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3Z"
              clipRule="evenodd"/>
      </svg>}

    </div>
  );
};

export default SlidePrevButton